<template>
  <div class="box">
    <div class="box-head">
      <a class="navbar-brand" href="/">CS System</a>
    </div>
    <div class="box-body">
      <div class="login-form-box">
        <div class="head-tool">Login</div>
        <el-form
          :model="formData"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="login-form"
        >
          <el-form-item label="账号" prop="email" :error="loginErr">
            <el-input v-model="formData.email" prefix-icon="el-icon-user" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="formData.password"
              prefix-icon="el-icon-lock"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()" size="medium">提交</el-button>
            <el-button @click="resetForm()" size="medium">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { login } from "../../api/user";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router"
import { toRefs, reactive, ref } from "vue"

const state = reactive({
  loginErr: null,
  formData: {
    email: '',
    password: '',
  },
})

const router = useRouter()
const ruleForm = ref(null)
const rules = {
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
}

const submitForm = () => {
  ruleForm.value.validate((valid) => {
    if (!valid) {
      console.log('error submit!!')
      return false
    }

    state.loginErr = null
    login(state.formData.email, state.formData.password).then(result => {
      if (result.status === 'success') {
        window.sessionStorage.setItem('token', result.token)
        window.sessionStorage.setItem('user_id', result.user_id)
        window.sessionStorage.setItem('username', result.username)
        //刷新当前页
        router.go(0)
      } else {
        state.loginErr = "账号或密码错误"
      }
    })
  });
}

const resetForm = () => {
  ruleForm.value.resetFields()
}

const { formData, loginErr } = toRefs(state)

</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #f8fafc;
}

.box-head {
  padding-left: 60px;
  height: 55px;
  line-height: 55px;
  width: 100%;
  background: white;
  box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
}

.head-tool {
  height: 45px;
  padding-left: 20px;
  line-height: 45px;
  margin-bottom: 0;
  color: var(--el-color-text-regular);
  background-color: rgba(0, 0, 0, 0.03);
  font-family: "Nunito", sans-serif;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.login-form-box {
  max-width: 650px;
  margin: 50px auto;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.login-form {
  width: 500px;
  margin: 20px auto;
}

.navbar-brand {
  display: inline-block;
  font-size: 16px;
  line-height: inherit;
  white-space: nowrap;
  text-decoration: none;
  background-color: transparent;
  color: var(--el-color-text-regular);
  font-weight: 500;
  font-family: "Nunito", sans-serif;
}
</style>
